import React, { useImperativeHandle, useState } from 'react'
import { Form, Input, InputNumber, Modal, Radio, TreeSelect, message } from 'antd'
import { IModalProps, ModelAction } from '@/types/modal'
import { IMenuItem } from '@/types/menu'
import { createMenu, editMenu, getMenuList } from '@/api/meun'
import { InfoCircleOutlined } from '@ant-design/icons'

const CreateMenu: React.FC<IModalProps<IMenuItem>> = props => {
  const [action, setAction] = useState<ModelAction>('create')
  const [visiable, setVisiable] = useState(false)
  const [form] = Form.useForm()
  const [menuList, setMenuList] = useState<IMenuItem[]>([])

  // 自定义mRef,将open方法暴露给父组件使用
  useImperativeHandle(props.mRef, () => {
    return {
      open
    }
  })

  /**
   * 获取所有菜单
   */
  const getAllMenuList = async () => {
    const { data } = await getMenuList()
    setMenuList(data)
  }
  // 显示
  const open = (type: ModelAction, data?: IMenuItem | { parentId: string; orderBy: number }) => {
    console.log('open:', type, data)
    getAllMenuList()
    if (data) {
      form.setFieldsValue(data)
    }
    setAction(type)
    setVisiable(true)
  }

  // 提交
  const handleSubmit = () => {
    form.validateFields().then(vaild => {
      if (vaild) {
        const params = {
          ...form.getFieldsValue()
        }
        console.log(params)
        if (action === 'create') {
          createMenu(params).then(() => {
            message.success('创建成功')
            props.update()
          })
        } else {
          editMenu(params).then(() => {
            message.success('修改成功')
            props.update()
          })
        }
        onCancel()
      }
    })
  }

  // 关闭
  const onCancel = () => {
    setVisiable(false)
    form.resetFields()
  }

  return (
    <Modal
      title={action === 'edit' ? '编辑菜单' : '创建菜单'}
      width={800}
      okText='确定'
      cancelText='取消'
      open={visiable}
      onCancel={onCancel}
      onOk={handleSubmit}
    >
      <Form form={form} labelAlign='right' labelCol={{ span: 4 }} initialValues={{ menuState: 1, menuType: 1 }}>
        <Form.Item hidden name='_id'>
          <Input />
        </Form.Item>
        <Form.Item label='父级菜单' name='parentId'>
          <TreeSelect
            placeholder='请选择父级菜单'
            allowClear
            treeDefaultExpandAll
            fieldNames={{ label: 'menuName', value: '_id' }}
            treeData={menuList}
          ></TreeSelect>
        </Form.Item>
        <Form.Item label='菜单类型' name='menuType' rules={[{ required: true, message: '请选择菜单类型' }]}>
          <Radio.Group>
            <Radio value={1}>菜单</Radio>
            <Radio value={2}>按钮</Radio>
            <Radio value={3}>页面</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label='菜单名称' name='menuName' rules={[{ required: true, message: '请输入菜单名称' }]}>
          <Input placeholder='请输入菜单名称'></Input>
        </Form.Item>
        <Form.Item shouldUpdate noStyle>
          {() => {
            return form.getFieldValue('menuType') === 2 ? (
              <Form.Item label='权限标识' name='menuCode'>
                <Input placeholder='请输入权限标识' />
              </Form.Item>
            ) : (
              <>
                <Form.Item label='菜单图标' name='icon'>
                  <Input placeholder='请输入菜单图标' />
                </Form.Item>
                <Form.Item label='路由地址' name='path'>
                  <Input placeholder='请输入路由地址' />
                </Form.Item>
                <Form.Item label='组件名称' name='component'>
                  <Input placeholder='请输入组件名称' />
                </Form.Item>
              </>
            )
          }}
        </Form.Item>

        <Form.Item
          label='排序'
          name='orderBy'
          tooltip={{ title: '排序值越大越靠后', icon: <InfoCircleOutlined rev={undefined} /> }}
        >
          <InputNumber placeholder='请输入排序值' />
        </Form.Item>
        <Form.Item label='菜单状态' name='menuState'>
          <Radio.Group>
            <Radio value={1}>启用</Radio>
            <Radio value={2}>停用</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default CreateMenu
